<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>商品详情</title>
<link rel="stylesheet" type="text/css" href="../css/swiper.css" />
<link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
.topFix{
	position: fixed;
	width: 100%;
	height: 2rem;
	background: #fff;
	opacity: 0.8;
	padding: 0 1rem;
	z-index: 11;
}
.topFix .txt{
	font-size: 0.7rem;
	font-weight: bold;
	padding-left: 0.5rem;
}
.topFix .downBtn{
	width: 3.5rem;
	height: 1.3rem;
	line-height: 1.3rem;
	color: #fff;
	border-radius: 0.2rem;
	background: #e73350;
	font-size: 0.6rem;
	text-align: center;
}
.notice {
	padding: 0 4rem 1rem;
	position: absolute;
	top: 4rem;
	width: 100%;
	z-index: 10;
}
.notice ul {
	height: 1.6rem;
	overflow: hidden;
}
.notice ul li {
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
.notice ul li.scroll {
	opacity: 0;
	/*-webkit-transform: translateY(-120%);*/
	/*transform: translateY(-120%,);*/
}
.notice .item {
	height: 100%;
	color: #FFF;
	border-radius: 0.8rem;
	padding: 0 0.6rem 0 0.8rem;
	font-size: 0.5rem;
	background-color: rgba(1, 1, 1, 0.5);
}
.notice .avatar {
	width: 1rem;
}
.notice .ttl {
	padding: 0 0.5rem;
}
	.godInfo {
		margin-bottom: 0.25rem;
		background: #FFF;
		padding: 0.75rem;
	}
	.priceInfo {
		padding: 0.25rem 0;
		font-size: 0.6rem;
		color: #adadad;
	}
	.priceInfo .price {
		margin: 0 0.5rem 0 0.25rem;
		font-size: 0.8rem;
	}
	.coupon {
		position: relative;
	}
	.couponInfo {
		position: absolute;
		left: 0;
		top: 0;
		width: 70%;
		height: 100%;
		color: #FFF;
	}
	.couponInfo .couponNum {
		font-size: 0.7rem;
		margin-bottom: 0.1rem;
	}
	.couponInfo .couponNum span {
		margin: 0 0.15rem;
		font-size: 1.5rem;
		line-height: 1;
	}
	.couponInfo .couponDate {
		font-size: 0.5rem;
	}
	.productDetail {
		background: #FFF;
	}
	.productDetail .ttl {
		font-size: 0.6rem;
		padding: 0.75rem;
	}
	.peoInfo{
		height: 2rem;
		background: #fff;
		padding: 0 1rem;
		margin-bottom: 0.2rem;
	}
	.peoInfo .img{
		width: 1.25rem;
		height: 1.25rem;
		margin-right: 0.5rem;
	}
	#footer {
		background-color: #FFF;
		height: 3rem;
		padding: 0 0.75rem;
	}
	.btmShareBox{
		width: 100%;
	}
	.btmShareBox > div {
		width: 47%;
		height: 2rem;
		font-size: 0.7rem;
	}
	.btmShareBox .left {
		border-radius: 0.4rem;
		border: 1px solid #E73250;
		text-align: center;
		line-height: 18px;
		color: #E73250;
		margin-right: 0.75rem;
	}
	.btmShareBox .right {
		border-radius: 0.4rem;
		color: #FFF;
		background-image: linear-gradient(-5deg, #E73451 1%, rgba(231,50,80,0.66) 100%);
	}
	.btmShareBox img {
		margin-right: 0.25rem;
		height: 0.8rem;
		width: auto;
	}
	@media all and (max-width: 360px){
		.btmShareBox > div {
			font-size: 0.6rem;
		}
		.btmShareBox img {
			margin-right: 0.15rem;
			height: 0.75rem;
		}
	}
	.backFix{
		position: fixed;
		bottom: 5rem;
		right: 0;
		width: 2.5rem;
	}
	.backFix img{
		height: 1.9rem;
		width: 1.9rem;
	}
	.popBox{
		top: 30%;
		width: 100%;
		padding: 0 2rem;
		background: transparent;
	}
.popBox .popHeader{
	height: 2.35rem;
	line-height: 2.35rem;
	font-size: 0.8rem;
	text-align: center;
	color: #fff;
	background: #e73350;

}
.popBox .popCon{
	min-height: 6.25rem;
	text-align: center;
	padding-bottom: 1rem;
}
.popBox .popCon .tit{
	padding-top: 0.9rem;
}
.popBox .popCon .input{
	font-size: 0.7rem;
	color: #353335;
	height: 1.65rem;
	line-height: 1.65rem;
	background: #F7F9F9;
	text-align: center;
	width: 80%;
	margin: 0.6rem auto;
}
.popBox .closeBtm{
	padding: 2rem 0;
}
.popBox .closeBtm img{
	height: 1.6rem;
	margin: 0 auto;
}

</style>
</head>

<body class="bg-f5">
	<div id="data_html"></div>

	<script type="text/x-dot-template" id="data_tpl">
		<div class="swiper-container mainImg">
			<div class="swiper-wrapper">
				{{ for(var i in it.small_images) { }}
				<div class="swiper-slide"><img src="{{= it.small_images[i] }}" width="100%" alt=""></div>
				{{ } }}
			</div>
		</div>
		<div class="godInfo">
			<div class="godTitle"><span class="ttlTag">{{= it.user_type }}</span>{{= it.title }}</div>
			<div class="priceInfo aui-flex-col aui-flex-middle font-helvet">
				<div class="color-red aui-margin-r-10">券后价 <span class="price">¥{{= it.coupon_amount }}</span></div>
				<div>现价 ¥{{= it.zk_final_price }}</div>
				<div class="flex-auto aui-font-size-10 aui-text-right">月销 {{= it.volume }}件</div>
			</div>
			{{ if(it.coupon_info){ }}
			<div class="coupon" tapmode onclick="taobao();">
				<img src="../image/best/coupon.png" width="100%" alt="">
				<div class="couponInfo aui-flex-row aui-flex-middle aui-flex-center">
					<div class="couponNum">￥<span>{{= it.coupon_info }}</span>优惠券</div>
					<div class="couponDate">使用期限 {{= Date.parse(it.coupon_start_time).toString('yyyy.M.d')}}-{{= Date.parse(it.coupon_end_time).toString('yyyy.M.d')}}</div>
				</div>
			</div>
			{{ } }}
		</div>
		<div class="productDetail">
			<div class="ttl">商品详情</div>
			<div class="detail">
				{{ for(var i in it.small_images) { }}
				<img src="{{= it.small_images[i] }}" width="100%" alt="">
				{{ } }}
			</div>
		</div>
		<div class="btmFix aui-flex-col aui-flex-middle aui-flex-between aui-border-t" id="footer">
			<div class="btmShareBox aui-flex-col aui-flex-between aui-flex-middle">
				<div class="left" tapmode onClick="openWin();">
					<div class="aui-font-size-15">VIP大礼包</div>
					<div class="aui-font-size-10">成为vip,自省赚礼包</div>
				</div>
				<div class="right aui-flex-col aui-flex-middle aui-flex-center" tapmode onClick="showMask()">
					<div><img src="../image/common/36.png" alt=""></div>
					<div>领券购¥{{= it.coupon_info }}券</div>
				</div>
			</div>
	</div>
	</script>
	<!-- <div class="swiper-container mainImg">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="../image/demo/shop.png" width="100%" alt=""></div>
			<div class="swiper-slide"><img src="../image/demo/shop.png" width="100%" alt=""></div>
			<div class="swiper-slide"><img src="../image/demo/shop.png" width="100%" alt=""></div>
		</div>
	</div>
	<div class="godInfo">
		<div class="godTitle"><span class="ttlTag">天猫</span>欧莱雅护发精油修复干枯防毛躁柔顺头发护理烫后护卷发护发素正品</div>
		<div class="priceInfo aui-flex-col aui-flex-middle">
			<div class="color-red">券后价</div>
			<div class="color-red price font-helvet">¥59.9</div>
			<div>现价 ¥79.9</div>
			<div class="flex-auto aui-font-size-10 aui-text-right">月销 7629件</div>
		</div>
		<div class="coupon">
			<img src="../image/best/coupon.png" width="100%" alt="">
			<div class="couponInfo aui-flex-row aui-flex-middle aui-flex-center">
				<div class="couponNum">￥<span>30</span>优惠券</div>
				<div class="couponDate">使用期限 2018.09.02-2018.09.10</div>
			</div>
		</div>
	</div>
	<div class="peoInfo comFlexItem">
		<div class="img"><img src="../image/demo/tou_h5.png" style="height:1.25rem" alt=""></div>
		<div class="flex-auto aui-font-size-14 color-000">KELLY 霏霏邀请你省钱</div>
		<div class="aui-font-size-12 color-ad aui-padded-r-15 right-arrow" tapmode onclick="openHtml()">他的推荐</div>
	</div>
	<div class="productDetail">
		<div class="ttl">商品详情</div>
		<div class="detail">
			<img src="../image/demo/05.png" alt="">
			<img src="../image/demo/05.png" alt="">
			<img src="../image/demo/05.png" alt="">
			<img src="../image/demo/05.png" alt="">
		</div>
	</div> -->
	
	<!-- <div class="backFix"><img src="../image/common/wx_back3.png" alt=""></div> -->
	<div class="kouBox">
		<div class="popOverlay aui-hide" tapmode onclick="closeMask()"></div>
		<div class="popBox aui-hide">
			<div class="popHeader">口令已复制，打开手机淘宝领卷购买</div>
			<div class="popCon bg-white">
				<div class="aui-font-size-12 tit">使用说明：打开手机淘宝，即可领取优惠券</div>
				<div><input type="text" class="input" value="" id="taoCode"></div>
				<div class="aui-font-size-12 color-ad">若自动复制失败，可长安复制上方淘宝口令</div>
			</div>
			<div class="closeBtm" tapmode onclick="closeMask()"><img src="../image/common/08.png" alt=""></div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/import.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/date.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript">
var PARAM = GetRequest();
var topSwiper;
var GOD_INFO;

$$('#taoCode').val(PARAM.code);

getdetails()
function sliderInit(){
	topSwiper = new Swiper('.mainImg',{
		speed: 600,
		autoplay: false
	});
}
function showMask(){
	$$('.popOverlay').removeClass('aui-hide');
	$$('.popBox').removeClass('aui-hide');
}
function closeMask(){
	$$('.popOverlay').addClass('aui-hide');
	$$('.popBox').addClass('aui-hide');
}
function openHtml(){
	window.location.href = 'wx_tk_referee.html'
}

function getdetails(){
	$.ajax({
      url: BASE_URL_2 + 'App/Select/shopDetail',
      type: 'post',
			data: {
				shop_id: PARAM.shopid
			},
      dataType: 'json',
      timeout: 6000,
      headers: {
          Accept: "application/json; charset=utf-8",
      },
      success: function (ret) {
		if (ret && ret.code == 1 ) {
			GOD_INFO = ret.data;
			var tpl = $('#data_tpl').html();
			var tempFn = doT.template(tpl);
			$('#data_html').html(tempFn(ret.data));
			sliderInit();
        } else {

        }
      },
      error: function (err) {

      }
  })

}
function getKouling(){
	if(GOD_INFO.coupon_share_url){
		var url = "https:" + GOD_INFO.coupon_share_url
	}else {
		var url = "https:" + GOD_INFO.url
	}
	var userInfo = getUserinfo();
	var postData = {
		url: url,
		short_title: GOD_INFO.short_title,
		pict_url: GOD_INFO.pict_url,
		userid: getUserId(),
		user_nickname: userInfo.user_nickname
	}
	api.ajax({
        url: BASE_URL_2 + 'App/Select/modelGenerate',
        method: 'post',
        data: {
            values:postData
        }
    },function(ret,err){
        if (ret && ret.code == 1 ) {
					DATA.code = ret.data.model
					api.openWin({
						name: 'kouling_win',
						url: 'kouling_win.html',
						pageParam: {
							DATA: DATA
						}
					});
        }else {
        	toast(ret.meg)
        }
    });
}

</script>
</html>
